<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<meta name="referrer" content="no-referrer"/>
<head th:include="component/heard :: head"></head>
<body class="">
<nav th:include="component/nav :: nav"></nav>
<link rel="stylesheet" href="/js/bootstrap-table.min.css">
<script src="/js/bootstrap-table.min.js"></script>
<script src="/js/mycard.js"></script>

<div class="d-flex align-items-start ">
    <div class="nav flex-column  me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
        <a class="nav-link link-dark active" id="v-pills-home-tab" data-bs-toggle="pill"
           data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home"
           aria-selected="true">报告
        </a>
        <a class="nav-link link-dark" id="v-pills-profile-tab" data-bs-toggle="pill"
           data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile"
           aria-selected="false">日志
        </a>
    </div>
    <div class="tab-content flex-fill" id="v-pills-tabContent">
        <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel"
             aria-labelledby="v-pills-home-tab">
            <button class="btn btn-primary btn-sm" onclick="run()">开始</button>
            <div th:include="component/flow :: flow"></div>
            <table id="table" style="font-size: 10px;"></table>
        </div>
        <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
            <div th:include="component/log :: log"></div>
        </div>
    </div>
</div>
</body>
<script th:inline="javascript">

    const table = {
        $table: $('#table'),
        init: function () {
            let ietms = [[${card.itemList}]]
            let users = [[${card.userList}]]
            let columns = [{
                "field": "name",
                "title": "name"
            }];
            users.forEach(function (item, index, array) {
                columns.push({"field": item.username, "title": item.username});
            })
            this.$table.bootstrapTable({
                uniqueId: "name",
                data: ietms,
                columns: columns,
                classes: "table table-sm table-striped",
            });
        },
    };
    $(function () {
        table.init();

    })

    function run() {
        let cid = [[${card.id}]]
        $.ajax({
            type: "get",
            url: "/api/card/test/run/" + cid,
            async: true,
        });
    }
</script>
</html>
